<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Allowance updater example</title>
  </head>
  <body>
    <label for="shopping-check">Has the shopping been done? </label>
    <input type="checkbox" id="shopping-check">

    <p></p>

    <script>
      const checkBox = document.querySelector('input');
      const para = document.querySelector('p');
      let shoppingDone = false;

      checkBox.addEventListener('change', () => {
        checkBox.disabled = true;
        shoppingDone = true;
        updateAllowance();
      });

      function updateAllowance() {
        let childsAllowance;
        if (shoppingDone === true) {
          childsAllowance = 10;
        } else {
          childsAllowance = 5;
        }

        para.textContent = `Child has earned \$${childsAllowance} this week.`;
      }

      updateAllowance();
    </script>
  </body>
</html>
